<template>
  <div>
    <!-- 头部标签 -->
    <van-nav-bar fixed>
      <template v-slot:left>
        <!-- <img class="logo" src="../../assets/toutiao_logo.png" alt="" /> -->
        <img class="logo" :src="imgObj" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="toSearch" />
      </template>
    </van-nav-bar>

    <!-- 频道部分 -->
    <van-tabs
      v-model="channelId"
      animated
      sticky
      offset-top="1.22667rem"
      @change="changeChannel"
    >
      <van-tab
        v-for="item in channelsList"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
        <ArticleList :channelId="channelId"></ArticleList
      ></van-tab>
    </van-tabs>
    <!-- 编辑频道图标 -->
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="showPopup"
    />

    <!-- 频道管理 -->
    <van-popup
      v-model="show"
      get-container="body"
      class="channel_popup"
      @closePopup="closePopup"
    >
      <ChannelEidt
        :userChannelList="channelsList"
        @close="show = false"
        @addChannel="addChannel"
        @removeChannel="removeChannel"
        @closePopup="closePopup"
        v-model="channelId"
      ></ChannelEidt>
    </van-popup>
  </div>
</template>
<script>
import logoPng from '@/assets/toutiao_logo.png'
import {
  getUserChannelsAPI,
  updateChannelAPI,
  deleteChannelAPI
} from '@/api/index.js'
import ArticleList from './components/ArticleList.vue'
import ChannelEidt from './ChannelEdit.vue'
export default {
  components: {
    ArticleList,
    ChannelEidt
  },
  data() {
    return {
      imgObj: logoPng,
      // 频道id
      channelId: 0,
      // 频道列表
      channelsList: [],
      show: false,
      isSeach: false,
      channelScrollTop: {} // 保存每个频道的滚动位置  {推荐频道ID:滚动距离，html频道ID:自己滚动距离}
    }
  },
  created() {
    this.getChannelsList()
  },
  methods: {
    // 获取频道列表
    async getChannelsList() {
      const { data: res } = await getUserChannelsAPI()
      this.channelsList = res.data.channels
    },
    showPopup() {
      this.show = true
    },
    // tabs切换触发方法
    // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度回到了顶部
    // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发了，所以才把数据里设置为0
    // 切换来的一瞬间,高度为0，你设置滚动位置也无用
    changeChannel() {
      // tab切换后,设置滚动条位置
      this.$nextTick(() => {
        document.documentElement.scrollTop =
          this.channelScrollTop[this.channelId]
        document.body.scrollTop = this.channelScrollTop[this.channelId]
      })
    },
    async addChannel(item) {
      this.channelsList.push(item)
      // 筛选不是推荐频道对象
      const listArr = this.channelsList.filter(item => item.id !== 0)
      const newArr = listArr.map((item, index) => {
        const newItem = { ...item } // 拷贝数组
        delete newItem.name
        newItem.seq = index

        return newItem
      })
      const res = await updateChannelAPI({
        channels: newArr
      })
    },
    async removeChannel(item) {
      const index = this.channelsList.findIndex(i => i.id === item.id)
      this.channelsList.splice(index, 1)
      const res = await deleteChannelAPI(item.id)
      console.log(res) //  204 无返回内容
    },
    closePopup(val) {
      this.show = val
    },
    // 跳转搜索页面
    toSearch() {
      this.$router.push('/search')
    },
    scrollTo() {
      // 谷歌浏览器内核,和安卓手机内置浏览器的内核不是同一个
      // 获取scrollTop方式不同
      // 谷歌浏览器用的html的scrollTop
      // 有的浏览器用的body的scrollTop
      // this.$route.meta.scrollT = document.body.scrollTop
      this.$route.meta.scrollT =
        document.documentElement.scrollTop || document.body.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollTop[this.channelId] =
        document.documentElement.scrollTop || document.body.scrollTop
      console.log(this.channelScrollTop)
    }
  },
  // 前提:组件缓存，切走了就是失去激活生命周期方法触发无组件缓存，被切走了,destroyed销毁生命周期方法
  activated() {
    console.log(this.$route)
    window.addEventListener('scroll', this.scrollTo)
    // window和document,监听网页滚动的事件
    // html标签获取scrollTop，滚动的距离，和设置滚动的位置立刻设置,滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.channelScrollTop[this.channelId]
  },
  // 前提:组件缓存,切走了就是失去激活生命周期方法触发
  // 无组件缓存,被切走了,destroyed销毁生命周期方法
  deactivated() {
    window.removeEventListener('scroll', this.scrollTo)
  }
}
</script>
<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
/* tab内容距离tab导航的距离 */
.van-tabs {
  padding-top: 40px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
</style>
